<!DOCTYPE html>
<html>
<head>
    <title>数据统计</title>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js" ></script>
</head>
<body style="">
	<div style="padding: 10px">
		设备类型:  <select id="kbc">
			<option value="">全部</option>
			<option value="kbxj0001">kbxj0001</option>
			<option value="kbxj0002">kbxj0002</option>
			<option value="kbxj0003">kbxj0003</option>
			<option value="kbxj0004">kbxj0004</option>
			<option value="kbxj0005">kbxj0005</option>
			<option value="kbxj0006">kbxj0006</option>
			<option value="kbxj0007">kbxj0007</option>
			<option value="kbxj0008">kbxj0008</option>
			<option value="kbxj0009">kbxj0009</option>
			<option value="kbxj0010">kbxj0010</option>
		</select>
		
		开始时间：
		<input type="date" id="dateStart" value="2024-03-01">
		结束时间：
		<input type="date" id="dateEnd"  value="2024-03-29">
		
		<button onclick="search()">查询</button>
	</div>
	<div style="height:100%;display: flex;">
		<div style="width: 50%;padding:5px;">
			<div id="qpMap1" style="width: 100%;height:600px;"> </div>
			<div id="qpMap2" style="width: 100%;height:400px;"> </div>
		</div>
		<div style="width: 50%;height:100%;padding:5px;">
			<div style="padding: 5px">
				<input type="checkbox" name="kbcstatus" value="M" checked onchange="search()">移动
				<input type="checkbox" name="kbcstatus" value="S" checked onchange="search()">停止
				<input type="checkbox" name="kbcstatus" value="U" checked onchange="search()">未知
			</div>
			<div id="rlMap1" style="width: 100%;height:400px;"></div>
			<div style="width: 100%;height:350px;display: flex;margin-top: 20px"> 
				<div id="btMap1" style="width: 50%;height:350px;"></div>
				<div id="zzMap1" style="width: 50%;height:350px;"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	const url = "http://wenbin.asuscomm.com:20005";
	// const url = "http://127.0.0.1:10001";
	function search(){
		var kbc = document.getElementById('kbc').value;
		if (kbc === undefined || kbc === null) {
			alert("请选择快保车")
		} else {
			
		}
		var startTimestamp ;
		var endTimestamp ;
		var dateStart = document.getElementById('dateStart').value
		if (dateStart === undefined || dateStart === null  || dateStart === '') {
			alert("请填写开始时间")
		} else {
			startTimestamp = dateToTimestamp(dateStart);
		}
		
		var dateEnd = document.getElementById('dateEnd').value;
		if (dateEnd === undefined || dateEnd === null || dateEnd === '') {
			alert("请填写结束时间")
		} else {
			endTimestamp = dateToTimestamp(dateEnd);
		}
		var kbcstatus = document.getElementsByName("kbcstatus")
		console.log(kbcstatus)
		var status = [];
	    for (var i = 0; i< kbcstatus.length; i++){
	        if (kbcstatus[i].checked){
	        	status.push(kbcstatus[i].value)
	        }
	    }
		// 执行操作
		loadingqpMapOne(kbc,startTimestamp,endTimestamp);
		loadingqpMapTwo(kbc,startTimestamp,endTimestamp);
		loadingbtMap(kbc,startTimestamp,endTimestamp);
		loadingzzMap(kbc,startTimestamp,endTimestamp);
		loadingrlMap(kbc,startTimestamp,endTimestamp,status);
	}
	
	function dateToTimestamp(date) {
		return new Date(date).getTime();
	}
	
    $(function(){
    	search();
	});
	</script>
	
    
    <script type="text/javascript">
    var qpmapOneData = {};
    
    function loadingqpMapOne(id,start,end){
    	$.ajax({
    		url: url + "/huanwei/qpMapOne",
    		dataType:"json",
    		type:"GET",
    		data:{
    			id: id,
    			start: start,
    			end: end
    		},
    		success:function(data){
    			console.log(data)
    			qpmapOneData.unknow = data.body.unknow;
    			
    			qpmapOneData.stop =  data.body.stop;
    			
    			qpmapOneData.move = data.body.move;
    			
    			qpMapOneFun(qpmapOneData);
    		},
    		error:function(){
    			alert("获取数据失败！");
    		}
    	});
    }
    
    function qpMapOneFun( data ){
        var chartDom = document.getElementById('qpMap1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '车辆运行统计图'
            //subtext: 'Data from: Heinz 2003'
          },
          grid: {
            left: '3%',
            right: '7%',
            bottom: '7%',
            containLabel: true
          },
          tooltip: {
            // trigger: 'axis',
            showDelay: 0,
            formatter: function (params) {
              if (params.value.length > 1) {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  params.value[0] +
                  '小时 ' +
                  params.value[1] +
                  '分钟 '
                );
              } else {
                return (
                  params.seriesName +
                  ' :<br/>' +
                  params.name +
                  ' : ' +
                  params.value +
                  '小时 '
                );
              }
            },
            axisPointer: {
              show: true,
              type: 'cross',
              lineStyle: {
                type: 'dashed',
                width: 1
              }
            }
          },
          toolbox: {
            feature: {
              dataZoom: {},
              brush: {
                type: ['rect', 'polygon', 'clear']
              }
            }
          },
          brush: {},
          legend: {
            data: ['未知状态', '停车', '移动'],
            left: 'center',
            bottom: 10
          },
          xAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value} 分钟'
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value} 小时'
              },
              splitLine: {
                show: false
              }
            }
          ],
          //  #FF0000
          color:['#0000FF','#FDD7E4','#00FF00'],
          series: [
            {
              name: '未知状态',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data: data.unknow,
              markArea: {
                silent: true,
                itemStyle: {
                  color: 'transparent',
                  borderWidth: 1,
                  borderType: 'dashed'
                },
                data: [
                  [
                    {
                      name: '未知范围',
                      xAxis: 'min',
                      yAxis: 'min'
                    },
                    {
                      xAxis: 'max',
                      yAxis: 'max'
                    }
                  ]
                ]
              },
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              }
              /**,
              markLine: {
                lineStyle: {
                  type: 'solid'
                },
                data: [{ type: 'average', name: 'AVG' }, { xAxis: 160 }]
              }*/
            },
            {
                name: '停车',
                type: 'scatter',
                emphasis: {
                  focus: 'series'
                },
                // prettier-ignore
                data: data.stop,
                markArea: {
                  silent: true,
                  itemStyle: {
                    color: 'transparent',
                    borderWidth: 1,
                    borderType: 'dashed'
                  },
                  data: [
                    [
                      {
                        name: '停车',
                        xAxis: 'min',
                        yAxis: 'min'
                      },
                      {
                        xAxis: 'max',
                        yAxis: 'max'
                      }
                    ]
                  ]
                },
                markPoint: {
                  data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                  ]
                }/**,
                markLine: {
                  lineStyle: {
                    type: 'solid'
                  },
                  data: [{ type: 'average', name: 'AVG' }, { xAxis: 160 }]
                } */
              },
            {
              name: '移动',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data: data.move,
              markArea: {
                silent: true,
                itemStyle: {
                  color: 'transparent',
                  borderWidth: 1,
                  borderType: 'dashed'
                },
                data: [
                  [
                    {
                      name: '移动范围',
                      xAxis: 'min',
                      yAxis: 'min'
                    },
                    {
                      xAxis: 'max',
                      yAxis: 'max'
                    }
                  ]
                ]
              },
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              }/**,
              markLine: {
                lineStyle: {
                  type: 'solid'
                },
                data: [{ type: 'average', name: 'Average' }, { xAxis: 170 }]
              } */
            }
          ]
        };
        option && myChart.setOption(option);
    }
    
    </script>
    
    
    
    
    <script type="text/javascript">
    
    var qpMapTwoData = {};
    
    function loadingqpMapTwo(id,start,end){
    	$.ajax({
    		url:url + "/huanwei/qpMapTwo",
    		dataType:"json",
    		type:"GET",
    		data:{
    			id: id,
    			start: start,
    			end: end
    		},
    		success:function(data){
    			console.log(data)
    			qpMapTwoData = data.body.data;
    			qpMapTwoFun(qpMapTwoData);
    		},
    		error:function(){
    			alert("获取数据失败！");
    		}
    	});
    }
    
    function qpMapTwoFun(mydata){
    	var chartDomQp2 = document.getElementById('qpMap2');
        var qp2 = echarts.init(chartDomQp2);
        var optionQp2;

        // prettier-ignore
        const hours = [
            '12a', '1a', '2a', '3a', '4a', '5a', '6a',
            '7a', '8a', '9a', '10a', '11a',
            '12p', '1p', '2p', '3p', '4p', '5p',
            '6p', '7p', '8p', '9p', '10p', '11p'
        ];
        // prettier-ignore
        const days = [
            '停车', '移动', '未知'
        ];
        // prettier-ignore
        const data = mydata;
        const title = [];
        const singleAxis = [];
        const series = [];
        days.forEach(function (day, idx) {
          title.push({
            textBaseline: 'middle',
            top: ((idx + 0.5) * 100) / 7 + '%',
            text: day
          });
          singleAxis.push({
            left: 150,
            type: 'category',
            boundaryGap: false,
            data: hours,
            top: (idx * 100) / 7 + 5 + '%',
            height: 100 / 7 - 10 + '%',
            axisLabel: {
              interval: 2
            }
          });
          series.push({
            singleAxisIndex: idx,
            coordinateSystem: 'singleAxis',
            type: 'scatter',
            data: [],
            symbolSize: function (dataItem) {
              return dataItem[1] * 4;
            }
          });
        });
        data.forEach(function (dataItem) {
          series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
        });
        optionQp2 = {
          tooltip: {
            position: 'top'
          },
          title: title,
          singleAxis: singleAxis,
          color:['#FF0000','#00FF00','#0000FF'],
          series: series
        };

        optionQp2 && qp2.setOption(optionQp2);
    }
    
    
    
    
    </script>
    
    <script type="text/javascript">
    var btMapData = {};
    
    function loadingbtMap(id,start,end){
    	$.ajax({
    		url:url + "/huanwei/btMapOne",
    		dataType:"json",
    		type:"GET",
    		data:{
    			id: id,
    			start: start,
    			end: end
    		},
    		success:function(data){
    			console.log(data)
    			btMapData = data.body;
    			btMapFun(btMapData);
    		},
    		error:function(){
    			alert("获取数据失败！");
    		}
    	});
    }
    
    function btMapFun(btMapData){
    	 var chartDomBtMap = document.getElementById('btMap1');
    	    var myChartBtMap = echarts.init(chartDomBtMap);
    	    var optionBtMap;

    	    optionBtMap = {
    	      title: {
    	        //text: 'Referer of a Website',
    	        subtext: '占比统计',
    	        left: 'center'
    	      },
    	      tooltip: {
    	        trigger: 'item'
    	      },
    	      legend: {
    	        orient: 'vertical',
    	        left: 'left'
    	      },
    	      color:['#00FF00','#FF0000','#0000FF'],
    	      series: [
    	        {
    	          name: '快保车',
    	          type: 'pie',
    	          radius: '50%',
    	          data: btMapData,
    	          emphasis: {
    	            itemStyle: {
    	              shadowBlur: 10,
    	              shadowOffsetX: 0,
    	              shadowColor: 'rgba(0, 0, 0, 0.5)'
    	            }
    	          }
    	        }
    	      ]
    	    };

    	    optionBtMap && myChartBtMap.setOption(optionBtMap);
    }
    
   
    </script>
    
    <script type="text/javascript">
    var zzMapData = {};
    
    function loadingzzMap(id,start,end){
    	$.ajax({
    		url:url + "/huanwei/zzMapOne",
    		dataType:"json",
    		type:"GET",
    		data:{
    			id: id,
    			start: start,
    			end: end
    		},
    		success:function(data){
    			console.log(data)
    			zzMapData = data.body;
    			zzMapFun(zzMapData);
    		},
    		error:function(){
    			alert("获取数据失败！");
    		}
    	});
    }
    
    
    function zzMapFun(zzMapData){
        var chartDomZzMap = document.getElementById('zzMap1');
        var myChartZzMap = echarts.init(chartDomZzMap);
        var optionZzMap;

        optionZzMap = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['1分钟以内', '1-3分钟', '3-5分钟', '5-10分钟', '10分钟以上'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          color:['#FF0000'],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              data: zzMapData
            }
          ]
        };

        optionZzMap && myChartZzMap.setOption(optionZzMap);
    }
    </script>
    
    <script src="//webapi.amap.com/maps?v=1.4.15&key=gwbgwb9527123"></script>
<!-- <script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script> -->
<script>
	var rlMapData = {};
	
    function loadingrlMap(id,start,end,status){
    	console.log("===",JSON.stringify(status))
    	$.ajax({
			url:url + "/huanwei/rlMapOne",
			dataType:"json",
			type:"GET",
			data:{
				id: id,
				start: start,
				end: end,
				status: JSON.stringify(status)
			},
			success:function(data){
				console.log(data)
				rlMapData = data.body;
				drawMap(rlMapData);
			},
			error:function(){
				alert("获取数据失败！");
			}
		});
    }

	function drawMap(rlMapData){
	    var map = new AMap.Map("rlMap1", {
	        resizeEnable: true,
	        center: [120.604261, 31.131984],
	        zoom: 14
	    });

	    if (!isSupportCanvas()) {
	        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
	    }

	    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
	    //参数说明如下:
	    /* visible 热力图是否显示,默认为true
	     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
	     * radius 势力图的每个点的半径大小
	     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
	     *	{
	     .2:'rgb(0, 255, 255)',
	     .5:'rgb(0, 110, 255)',
	     .8:'rgb(100, 0, 255)'
	     }
	     其中 key 表示插值的位置, 0-1
	     value 为颜色值
	     */
	    var heatmap;
	    map.plugin(["AMap.Heatmap"], function () {
	        //初始化heatmap对象
	        heatmap = new AMap.Heatmap(map, {
	            radius: 5, //给定半径
	            opacity: [0.2, 0.8]
	            /*,
	            gradient:{
	                0.5: 'blue',
	                0.65: 'rgb(117,211,248)',
	                0.7: 'rgb(0, 255, 0)',
	                0.9: '#ffea00',
	                1.0: 'red'
	            }
	             */
	        });
	        //设置数据集：该数据为北京部分“公园”数据
	        heatmap.setDataSet({
	            data: rlMapData,
	            max: 100
	        });
	    });
	}

    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
	</script>
</body>
</html>